<template>

  <div class="gerenzhongxin">

    <div class="head">
      <div class="left">
        <img src="../../assets/个人中心/1个人中心/通知.png"/>
      </div>
      <div class="cont">
        <p>个人中心</p>
      </div>
      <div class="right">
        <img class="img2" src="../../assets/个人中心/1个人中心/信息.png"/>
        <router-link to="/shezhi">
          <img class="img11" src="../../assets/个人中心/1个人中心/设置.png"/>
        </router-link>
      </div>
    </div>
    <div class="xinxi">
      <div class="yuan">
        <router-link to="/denglu">
          <img :src="boy.src"/>
        </router-link>
      </div>
      <p class="p1">{{boy.nichen}}</p>
      <div class="zhtx">
        <router-link to="/wodezhanghu">
          <p class="p2">账户提现</p>
        </router-link>
      </div>
    </div>
    <div class="top">
      <ul class="dingdan">
        <li>
          <p>我的订单</p>
        </li>
        <li>
            <router-link to="/quanbudingdan_f">
              <span>查看所有订单</span>
            </router-link>
          <img src="../../assets/个人中心/1个人中心/右箭头.png"/>
        </li>
      </ul>
      <ul class="nav">
        <router-link to="/daizhifu">
          <li>
            <div><img src="../../assets/个人中心/1个人中心/待支付.png"/></div>
            <p>待支付</p>
          </li>
        </router-link>
        <router-link to="/daifahuo">
          <li>
            <div><img src="../../assets/个人中心/1个人中心/待发货.png"/></div>
            <p>待发货</p>
          </li>
        </router-link>
        <router-link to="/daishouhuo">
          <li>
            <div><img src="../../assets/个人中心/1个人中心/待收货.png"/></div>
            <p>待收货</p>
          </li>
        </router-link>
        <router-link to="/jiaoyiwancheng">
          <li>
            <img src="../../assets/个人中心/1个人中心/交易完成.png"/>
            <p>交易完成</p>
          </li>
        </router-link>
      </ul>
    </div>
    <!--中间部分-->
    <ul class="fanhuijin">
      <li>
        <p>我的返金排号</p>
      </li>
      <li>
        <router-link to="/fanjinpaihang">
          <span @click="">查看更多</span>
        </router-link>
        <img style="width: 0.488rem;" src="../../assets/个人中心/1个人中心/向下箭头.png"/>
      </li>
    </ul>
    <ul class="money">
      <li v-for="item in FHmoney">
        <span>{{item.datee}}</span>
        <span>{{item.xf}}</span>
        <span>{{item.ph}}</span>
      </li>
    </ul>
    <ul class="score">
      <li>
        <p>0</p>
        <router-link to="/wodeshendengzhi">
          <span @click="">我的神灯</span>
        </router-link>
      </li>
      <li>
        <p>0</p>
        <router-link to="/shendengzhimingxi">
          <span @click="">我的积分</span>
        </router-link>
      </li>
      <li>
        <p>0</p>
        <span>我的优惠券</span>
      </li>
      <li>
        <p>0</p>
        <router-link to="/wodexinde">
          <span @click="">我的心得</span>
        </router-link>
      </li>
    </ul>
    <ul class="more">
      <li>
        <router-link to="/shimingrenzheng_t2">
          <p><img src="../../assets/个人中心/2客服与反馈/实名认证.png"/></p>
          <span>实名认证</span>
        </router-link>
      </li>
      <li>
        <p><img src="../../assets/个人中心/1个人中心/收货地址.png"/></p>
        <span>收货地址</span>
      </li>
      <li>
        <router-link to="/guanzhugongzhonghao">
          <p><img src="../../assets/个人中心/1个人中心/关注公众号.png"/></p>
          <span>关注公众号</span>
        </router-link>
      </li>
      <li>
        <router-link to="/kefuyufankui">
          <p><img src="../../assets/个人中心/1个人中心/客服与反馈.png"/></p>
          <span>客服与反馈</span>
        </router-link>
      </li>
    </ul>
    <foot></foot>
  </div>
</template>
<script>
  import foot from '../WangFooter/WangFooter'
  export default {
    data() {
      return {
        FHmoney: [
          {datee: "2017/06/26", xf: "消费：￥100", ph: "排号 : 10"},
          {datee: "2017/06/26", xf: "消费：￥100", ph: "排号 : 10"},
          {datee: "2017/06/26", xf: "消费：￥100", ph: "排号 : 10"},
          {datee: "2017/06/26", xf: "消费：￥100", ph: "排号 : 10"}
        ],
        boy:{nichen:"祝政",src:require("../../assets/个人中心/1个人中心/ZZ.png")}
      }
    },
    components: {
      // 底部
      foot
    },
    methods: {}
  }
</script>
<style scoped>
  .head{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .head .left{
    transform: translate(0.8rem,0.9rem);
  }
  .head .cont{
    transform: translate(0.8rem,0.75rem);
    font-size: 0.8rem;
    color: white;
  }
  .head .right{
    transform: translate(-0.8rem,0.9rem);
  }
  .head .right img{
    margin-left: 0.5rem;
  }
  .head img{
    width: 0.8rem;

  }
  .xinxi{
    width: 100%;
    height: 5.333rem;
    background-color: #fee3e3;
    margin-top: 2.666rem;
    position: relative;
  }
  /**/
  .yuan{
    position: absolute;
    width: 2.777rem;
    height: 2.777rem;
    /*background: #e38e8e;*/
    border-radius: 50%;
    top: 1.277rem;
    left: 0.611rem;
    right: 0.583rem;
  }
  .xinxi .p1{
    position: absolute;
    top: 2.361rem;
    left: 3.944rem;
    height: 0.805rem;
    font-size: 0.833rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .zhtx{
    position: absolute;
    bottom: 1.055rem;
    right: 1.222rem;
    width: 3.888rem;
    height: 1.111rem;
    background-color: #d26060;
    border-radius: 0.555rem;
  }
  .zhtx .p2{
    position: absolute;
    top: 0.06rem;
    left: 0;
    right: 0;
    text-align: center;
    height: 0.666rem;
    line-height: 1rem;
    font-size: 0.666rem;
    letter-spacing: 0;
    color: white;
  }
  .yuan img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  /**/
  .gerenzhongxin {

    width: 100%;
    height: 100%;
    background: #f2f2f2;
  }

  .top {
    width: 100%;
    height: 4rem;
    background: white;
  }

  .top .dingdan {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 1.777rem;
    border-bottom: 1px solid #CCCCCC;
  }

  .top .dingdan li:nth-child(1) {
    transform: translate(0.5rem,45%);
  }

  .top .dingdan li:nth-child(2) {
    transform: translate(-0.5rem, 0.6rem);

  }

  .top .dingdan p {
    font-size: 0.666rem;
    line-height: 0.377rem;
    color: #7b7b7b;
  }

  .top .dingdan span {
    line-height: 0.377rem;
    font-size: 0.533rem;
    letter-spacing: 0;
    color: #7b7b7b;
  }

  .top .dingdan img {
    width: 0.277rem;
    height: 0.5rem;
    transform: translateY(-0.05rem);
  }

  .top .nav {
    display: flex;
    justify-content: space-around;
    height: 2.222rem;
    transform: translateY(15%);
    text-align: center;
  }

  .top .nav img {
    height: 1rem;
  }

  .fanhuijin{
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-top: -1.8rem;
    height: 1.777rem;
    border-bottom: 1px solid #CCCCCC;
  }
  .fanhuijin li{
    transform: translate(0.5rem,30%);
  }
  .fanhuijin li:nth-child(2){
    transform: translate(-0.5rem,36%);
  }
  .fanhuijin li p{
    font-size: 0.666rem;
    font-family: "Microsoft Sans Serif";
    color: #7b7b7b;
  }
  .fanhuijin li span{
    font-family: MicrosoftYaHei;
    font-size: 0.533rem;
    letter-spacing: 0px;
    color: #7b7b7b;
  }
  .money{
    width: 100%;
  }
  .money li{
    display: flex;
    justify-content: space-around;
    background-color: white;
    height: 1.333rem;
    border-bottom: 1px solid #CCCCCC;
  }
  .money li span{
    transform: translateY(15%);
    font-size: 0.666rem;
    font-family: MicrosoftYaHei;
    color: #7b7b7b;
  }
  .score, .more{
    background-color: white;
    height: 2.66rem;
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-around;
    text-align: center;
    border-bottom: 1px solid #CCCCCC;
  }
  .score li,.more li{
    transform: translateY(15%);
    width: 3rem;
  }
  .score p{
    color: #ef8a8c;
    font-size: 0.622rem;
  }
  .score span,.more span{
    font-size: 0.555rem;
    color: #808080;
    transform: translateY(40%);
    display: inline-block;
  }
  .more{
    background-color: white;
    margin-top: 0;
    border-bottom:none;
    margin-bottom:2.5rem;

  }
  .more img{
    height: 0.8rem;
  }

</style>
